<div ng-controller="homeController">
    <div class="list topFix">

        <label class="item item-input item-select homeSelect">
            <div class="input-label">
                &nbsp;
            </div>
            <span class="downIcon"> ▼</span>
            <select ng-change="selectAction(x)"  ng-model="x" style="width: 96px">
                <option ng-repeat="select in selectName" value="{{select.date}}">{{select.date}}</option>
            </select>
        </label>
    </div>
    <ion-content class="contTopFix" padding="false" scroll="false" overflow-scroll="false" has-bouncing="true">

        <ion-scroll class="scrollHeight scrollColor" zooming="false" direction="y" scrollbar-x ='true' scrollbar-y ='true' paging="false"
                    delegate-handle="mainScroll">

            <div class="bookShelf">
                <div class="heightFix"></div>
                <div collection-repeat="book in books" class="noBorder"
                     collection-item-width="310px" collection-item-height="200px" ng-style="{'z-index': 10000 - $index,'width': selfWidth}">
                    <div ng-repeat="bookImg in book">
                        <img ng-click="newsId(bookImg.id)" ui-sref="main.mainText" ng-src="{{bookImg.thumbnail_url}}" sb-load="onImgLoad()"
                             draggable="false" ng-class="'img' + ($index + 1)" class="imgBook bookShelfHeight">
                        <p ng-style="numStyleL" ng-if="$index % 2 == 0">{{bookImg.journal_date}}</p>
                        <p ng-style="numStyleR" ng-if="$index % 2 != 0">{{bookImg.journal_date}}</p>
                    </div>
                    <img src="mycompass/images/bookShelf.png" draggable="false" class="bottomShelf" ng-style="shelfTop">
                </div>
            </div>
            <div class="heightfix"></div>
        </ion-scroll>
    </ion-content>
</div>
